<template>
  <div>
<!--    功能按钮-->
    <div style="text-align: right">
      <el-button type="primary" @click="add">添加</el-button>
    </div>
<!--    客户列表-->
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column type="index" label="行号" width="80" header-align="center" align="center"/>
      <el-table-column prop="company" label="客户公司名称" width="150" header-align="center"/>
      <el-table-column prop="contactName" label="联系人" width="150" header-align="center"/>
      <el-table-column prop="mobile" label="联系方式" width="150" header-align="center"/>
      <el-table-column prop="market" label="市场" width="150" header-align="center"/>
      <el-table-column prop="customer_type" label="客户类型" width="150" header-align="center"/>
      <el-table-column prop="customer_email" label="邮箱" width="150" header-align="center"/>
      <el-table-column prop="createdTime" label="创建时间" width="150" header-align="center"/>
      <el-table-column prop="saleId" label="所属销售" width="150" header-align="center"/>
      <el-table-column prop="source" label="来源" width="150" header-align="center"/>
      <el-table-column label="操作" header-align="center" align="center">
        <el-button type="primary" :icon="Edit" circle title="保存"/>
        <el-button type="primary">下单记录</el-button>
      </el-table-column>
    </el-table>
<!--    分页-->
    <div style="background-color: white ; height: 50px;line-height: 50px">
      <el-pagination
        background
        :page-size="pageSize"
        layout="total, sizes, ,prev, pager, next ,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
</template>
<!--vue组件选项定义-->
<script setup>
import {ref,onMounted} from "vue";
//引入api
import {queryCustomer} from "@/api/customer.js";
//引入图标
import {Delete, Edit} from '@element-plus/icons-vue'
//引入路由
import {useRouter} from "vue-router";
//路由实例
const router=useRouter();
//表格数据
const tableData = ref([{company:"sss"}])

//添加客户
function add(){
  router.push("/customer/add");
}

//分页信息
const page=ref(1);//当前页
const pageSize=ref(10);//每页记录数
const total=ref(0);//总记录数

//每页记录数变更
function chgsize(size){
  //更改每页记录数
  pageSize.value=size;
  //从每页开始查询
  page.value=1;
  //查询数据
  initDate();
}
//页面发生变化
function chgpg(pg){
  //更改当前页
  page.value=pg;
  //查询数据
  initDate();
}
//查询数据
async function initDate() {
  //请求
  let data={
    page:page.value,
    pageSize:pageSize.value
  };
  let res=await queryCustomer(data);
  if(res.code==200){
    tableData.value=res.data.data;
    //接收分页信息
    page.value=res.data.page;
    pageSize.value=res.data.pageSize;
    total.value=res.data.total;
  }
}

//生命周期 钩子
onMounted(()=>{
  initDate();
})
</script>

<style scoped></style>
